<template>
  <li style="line-height: 34px;" class="treeMenu curren">
     <span style="display: inline-block;width: 100%;padding:0 10px;" class="treeMenuSpan" @click="toggle(model)">
     <i class="glyphicon pull-right" style="line-height: 34px" v-if="model.categoryLevel < 3" :class='{ "glyphicon-chevron-right": !open, "glyphicon-chevron-down": open }'></i>
     {{ model.categoryName }}
     </span>
    <ul v-show="open" style="padding-left: 10px;">
      <tree-menu v-on:child-say='emitParent' v-for="(item,index) in model.children" :key="index" :model="item"></tree-menu>
    </ul>
  </li>
</template>
<script>
  export default {
    name: 'treeMenu',
    props: ['model'],
    data() {
      return {
        open: false,
      }
    },
    computed: {},
    methods: {
      emitParent:function(_id){
        this.$emit('child-say',_id);
      },
      toggle: function (_id) {
        this.open = !this.open;
        this.emitParent(_id);
      }
    }
  }
</script>
<style lang="less" >
.glyphicon-chevron-right:before,.glyphicon-chevron-down:before {
    opacity: 0.4;
    font-size: 12px;
}
  .treeMenu {
    font-size: 14px;
    /*padding: 0 10px;*/
  }

  .treeMenuSpan:hover{
    background: #ccc;
  }

  ul {
    list-style: none;
    li{
    	font-size: 16px;
    	
    }
  }

  i.icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    vertical-align: middle;
  }

  .icon.folder {
    background-image: url(/src/assets/folder.png);
  }

  .icon.folder-open {
    background-image: url(/src/assets/folder-open.png);
  }

  .icon.file-text {
    background-image: url(/src/assets/file-text.png);
  }

  .tree-menu li {
    line-height: 1.5;
  }
</style>
